<template>
	<div ref="content" class="city">
		<el-input placeholder="请选择赛事举办城市" v-model="propsCity" @focus="data.showCityDialog" @blur="data.hideCityDialog" />
		<el-card v-if="data.showCity" class="box-card">
			<template #header>
				<div class="card-header">
					<ul class="filter-tabar clearfix">
						<li
							v-for="(item, index) in cityList.cityListKey"
							:key="index"
							:class="{ active: data.upCityListIndex == index }"
							@mouseover="data.upCityListKey(index)"
						>
							{{ item }}
						</li>
					</ul>
				</div>
				<div class="city-content">
					<ul v-for="item in data.upCityList" :key="item" class="clearfix">
						<label v-if="data.upCityListIndex > 0" for="">{{ item.title }}</label>
						<li v-for="(ritem, idx) in item.lists" :key="idx" @click.stop="selectDepCity(ritem)">
							{{ ritem }}
						</li>
					</ul>
				</div>
			</template>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
import { reactive, computed, ref, onMounted } from "vue";
const citys: any = {
	city: [
		{
			title: "A",
			lists: ["阿坝", "阿拉善", "阿里", "安康", "安庆", "鞍山", "安顺", "安阳", "澳门"]
		},
		{
			title: "B",
			lists: ["北京", "白银", "保定", "宝鸡", "保山", "包头", "巴中", "北海", "蚌埠", "本溪", "毕节", "滨州", "百色", "亳州"]
		},
		{
			title: "C",
			lists: [
				"重庆",
				"成都",
				"长沙",
				"长春",
				"沧州",
				"常德",
				"昌都",
				"长治",
				"常州",
				"巢湖",
				"潮州",
				"承德",
				"郴州",
				"赤峰",
				"池州",
				"崇左",
				"楚雄",
				"滁州",
				"朝阳"
			]
		},
		{
			title: "D",
			lists: ["大连", "东莞", "大理", "丹东", "大庆", "大同", "大兴安岭", "德宏", "德阳", "德州", "定西", "迪庆", "东营"]
		},
		{
			title: "E",
			lists: ["鄂尔多斯", "恩施", "鄂州"]
		},
		{
			title: "F",
			lists: ["福州", "防城港", "佛山", "抚顺", "抚州", "阜新", "阜阳"]
		},
		{
			title: "G",
			lists: ["广州", "桂林", "贵阳", "甘南", "赣州", "甘孜", "广安", "广元", "贵港", "果洛"]
		},
		{
			title: "H",
			lists: [
				"杭州",
				"哈尔滨",
				"合肥",
				"海口",
				"呼和浩特",
				"海北",
				"海东",
				"海南",
				"海西",
				"邯郸",
				"汉中",
				"鹤壁",
				"河池",
				"鹤岗",
				"黑河",
				"衡水",
				"衡阳",
				"河源",
				"贺州",
				"红河",
				"淮安",
				"淮北",
				"怀化",
				"淮南",
				"黄冈",
				"黄南",
				"黄山",
				"黄石",
				"惠州",
				"葫芦岛",
				"呼伦贝尔",
				"湖州",
				"菏泽"
			]
		},
		{
			title: "J",
			lists: [
				"济南",
				"佳木斯",
				"吉安",
				"江门",
				"焦作",
				"嘉兴",
				"嘉峪关",
				"揭阳",
				"吉林",
				"金昌",
				"晋城",
				"景德镇",
				"荆门",
				"荆州",
				"金华",
				"济宁",
				"晋中",
				"锦州",
				"九江",
				"酒泉"
			]
		},
		{
			title: "K",
			lists: ["昆明", "开封"]
		},
		{
			title: "L",
			lists: [
				"兰州",
				"拉萨",
				"来宾",
				"莱芜",
				"廊坊",
				"乐山",
				"凉山",
				"连云港",
				"聊城",
				"辽阳",
				"辽源",
				"丽江",
				"临沧",
				"临汾",
				"临夏",
				"临沂",
				"林芝",
				"丽水",
				"六安",
				"六盘水",
				"柳州",
				"陇南",
				"龙岩",
				"娄底",
				"漯河",
				"洛阳",
				"泸州",
				"吕梁"
			]
		},
		{
			title: "M",
			lists: ["马鞍山", "茂名", "眉山", "梅州", "绵阳", "牡丹江"]
		},
		{
			title: "N",
			lists: ["南京", "南昌", "南宁", "宁波", "南充", "南平", "南通", "南阳", "那曲", "内江", "宁德", "怒江"]
		},
		{
			title: "P",
			lists: ["盘锦", "攀枝花", "平顶山", "平凉", "萍乡", "莆田", "濮阳"]
		},
		{
			title: "Q",
			lists: ["青岛", "黔东南", "黔南", "黔西南", "庆阳", "清远", "秦皇岛", "钦州", "齐齐哈尔", "泉州", "曲靖", "衢州"]
		},
		{
			title: "R",
			lists: ["日喀则", "日照"]
		},
		{
			title: "S",
			lists: [
				"上海",
				"深圳",
				"苏州",
				"沈阳",
				"石家庄",
				"三门峡",
				"三明",
				"三亚",
				"商洛",
				"商丘",
				"上饶",
				"山南",
				"汕头",
				"汕尾",
				"韶关",
				"绍兴",
				"邵阳",
				"十堰",
				"朔州",
				"四平",
				"绥化",
				"遂宁",
				"随州",
				"宿迁",
				"宿州"
			]
		},
		{
			title: "T",
			lists: ["天津", "太原", "泰安", "泰州", "台州", "唐山", "天水", "铁岭", "铜川", "通化", "通辽", "铜陵", "铜仁", "台湾"]
		},
		{
			title: "W",
			lists: ["武汉", "乌鲁木齐", "无锡", "威海", "潍坊", "文山", "温州", "乌海", "芜湖", "乌兰察布", "武威", "梧州"]
		},
		{
			title: "X",
			lists: [
				"厦门",
				"西安",
				"西宁",
				"襄樊",
				"湘潭",
				"湘西",
				"咸宁",
				"咸阳",
				"孝感",
				"邢台",
				"新乡",
				"信阳",
				"新余",
				"忻州",
				"西双版纳",
				"宣城",
				"许昌",
				"徐州",
				"香港",
				"锡林郭勒",
				"兴安"
			]
		},
		{
			title: "Y",
			lists: [
				"银川",
				"雅安",
				"延安",
				"延边",
				"盐城",
				"阳江",
				"阳泉",
				"扬州",
				"烟台",
				"宜宾",
				"宜昌",
				"宜春",
				"营口",
				"益阳",
				"永州",
				"岳阳",
				"榆林",
				"运城",
				"云浮",
				"玉树",
				"玉溪",
				"玉林",
				"鹰潭"
			]
		},
		{
			title: "Z",
			lists: [
				"杂多县",
				"赞皇县",
				"枣强县",
				"枣阳市",
				"枣庄",
				"泽库县",
				"增城市",
				"曾都区",
				"泽普县",
				"泽州县",
				"札达县",
				"扎赉特旗",
				"扎兰屯市",
				"扎鲁特旗",
				"扎囊县",
				"张北县",
				"张店区",
				"章贡区",
				"张家港",
				"张家界",
				"张家口",
				"漳平市",
				"漳浦县",
				"章丘市",
				"樟树市",
				"张湾区",
				"彰武县",
				"漳县",
				"张掖",
				"漳州",
				"长子县",
				"湛河区",
				"湛江",
				"站前区",
				"沾益县",
				"诏安县",
				"召陵区",
				"昭平县",
				"肇庆",
				"昭通",
				"赵县",
				"昭阳区",
				"招远市",
				"肇源县",
				"肇州县",
				"柞水县",
				"柘城县",
				"浙江",
				"镇安县",
				"振安区",
				"镇巴县",
				"正安县",
				"正定县",
				"正定新区",
				"正蓝旗",
				"正宁县",
				"蒸湘区",
				"正镶白旗",
				"正阳县",
				"郑州",
				"镇海区",
				"镇江",
				"浈江区",
				"镇康县",
				"镇赉县",
				"镇平县",
				"振兴区",
				"镇雄县",
				"镇原县",
				"志丹县",
				"治多县",
				"芝罘区",
				"枝江市",
				"芷江侗族自治县",
				"织金县",
				"中方县",
				"中江县",
				"钟楼区",
				"中牟县",
				"中宁县",
				"中山",
				"中山区",
				"钟山区",
				"钟山县",
				"中卫",
				"钟祥市",
				"中阳县",
				"中原区",
				"周村区",
				"周口",
				"周宁县",
				"舟曲县",
				"舟山",
				"周至县",
				"庄河市",
				"诸城市",
				"珠海",
				"珠晖区",
				"诸暨市",
				"驻马店",
				"准格尔旗",
				"涿鹿县",
				"卓尼",
				"涿州市",
				"卓资县",
				"珠山区",
				"竹山县",
				"竹溪县",
				"株洲",
				"株洲县",
				"淄博",
				"子长县",
				"淄川区",
				"自贡",
				"秭归县",
				"紫金县",
				"自流井区",
				"资溪县",
				"资兴市",
				"资阳"
			]
		}
	]
};
const emits = defineEmits(["update:city"]);
const props = defineProps({
	city: {
		type: String,
		default: ""
	}
});
const content = ref<HTMLInputElement | null>(null);
const data = reactive({
	title: "城市选择",
	showCity: false,
	upCityListIndex: 0,
	upCityList: [] as any[],
	isSelect: false,
	selectContent: "",
	hideCityDialog() {
		if (!data.isSelect || !data.selectContent) return false;
		data.showCity = false;
		data.upCityListIndex = 0;
	},
	showCityDialog() {
		data.selectContent = "";
		data.isSelect = false;
		data.showCity = true;
		data.upCityList = cityList.value.result[data.upCityListIndex];
	},
	upCityListKey(index: number) {
		data.upCityListIndex = index;
		data.upCityList = cityList.value.result[index];
	}
});
const cityList = computed(() => {
	return init(citys.city);
});
const init = (list: any[]) => {
	let chunk = 4;
	let result = [
		[
			{
				title: "热门",
				lists: [
					"上海",
					"北京",
					"广州",
					"重庆",
					"成都",
					"深圳",
					"武汉",
					"天津",
					"西安",
					"南京",
					"杭州",
					"苏州",
					"无锡",
					"昆山",
					"常州",
					"宁波",
					"合肥",
					"长沙",
					"嘉兴",
					"厦门"
				]
			}
		]
	];
	for (let i = 0, j = list.length; i < j; i += chunk) {
		result.push(list.slice(i, i + chunk));
	}
	let cityListKey: any[] = [];
	result.map(item => {
		let titles = "";
		item.map(ritem => {
			titles += ritem.title;
		});
		cityListKey.push(titles);
	});
	return {
		result,
		cityListKey
	};
};
const selectDepCity = (val: string) => {
	data.isSelect = true;
	data.showCity = false;
	data.upCityListIndex = 0;
	emits("update:city", val);
};
const propsCity = computed({
	get: () => {
		return props.city;
	},
	set: val => {
		emits("update:city", val);
	}
});
onMounted(() => {
	document.addEventListener("click", (e: any) => {
		if (!content.value?.contains(e.target)) {
			data.showCity = false;
			data.upCityListIndex = 0;
		}
	});
});
</script>

<style lang="scss" scoped>
.city {
	position: relative;
	z-index: 9;
	.box-card {
		position: absolute;
		width: 600px;
		// height: 200px;
		box-shadow: 0 0 4px 0 rgba(117, 117, 117, 0.5);
		border-radius: 2px;
		padding: 20px 21px;
		top: 5px;
	}
}

.clearfix {
	&:after {
		content: "";
		display: block;
		clear: both;
	}
}

li {
	list-style: none;
}

ul {
	padding: 0;
	margin: 0;
}

.filter-tabar {
	border-bottom: 1px solid #d7d7d7;
	cursor: pointer;

	li {
		text-align: center;
		padding: 0 14px;
		float: left;
		padding-bottom: 14px;
		font-size: 14px;
		margin: 0 8px;
		margin-bottom: -1px;
		position: relative;

		&.active {
			border-bottom: 2px solid #6287ff;
		}
	}
}

.city-content {
	max-height: 500px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 10px 13px 0 13px;

	label {
		display: block;
		margin-bottom: 5px !important;
		font-size: 20px !important;
		margin-left: 0 !important;
		color: #5f5f5f !important;
		margin-top: 5px;
	}

	li {
		padding: 6px 0 6px;
		float: left;
		text-align: left;
		font-size: 14px;
		min-width: 56px;
		margin-right: 24px;
		cursor: pointer;
	}
}
</style>
